<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等待商家接单</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <script src="//unpkg.com/vue@2/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.13/lib/index.js"></script>
</head>
<body>
<div id="showOrder">
    <h3>自动接单</h3>
    <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="开启"
            inactive-text="关闭"
            @change="merchantSelection(value,shopId)"
    >
        <!--        @change="automaticOrder()"-->
    </el-switch>
    <div v-if="mOrderVoList==null||mOrderVoList.length==0">
        <el-empty description="暂无订单"></el-empty>
    </div>

    <template>
        <!--  <el-button :plain="true" v-model="text" @click="voiceBroadcast(text)">打开消息提示</el-button>-->
        <!-- 告警音 -->
        <audio id="audio" src="/dingdanVoice.mp3"/>
    </template>


    <el-col style="padding-top: 20px"></el-col>

    <div v-for="orderVo in mOrderVoList">
        <el-descriptions :colon="false" :column="2">

            <el-descriptions-item label="收货地址">:{{orderVo.addressName}} {{orderVo.receiveName}} {{orderVo.tel}}
            </el-descriptions-item>
            <el-descriptions-item label="订单编号">:NO.{{orderVo.id}}</el-descriptions-item>
            <el-descriptions-item label="下单时间">:{{orderVo.createTime}}</el-descriptions-item>
            <el-descriptions-item label="金额￥">:{{orderVo.sumPrice}} (元)</el-descriptions-item>

            <el-descriptions-item label="订单状态:">
                <el-button
                        type="info"
                        size="small"
                        disabled=""
                        v-show="orderVo.status==2">
                    用户取消订单
                </el-button>

                <el-button
                        @click="operation(orderVo.id,4)"
                        type="success"
                        size="small"
                        v-show="orderVo.status==3">
                    商家接单
                </el-button>
                <el-button
                        @click="operation(orderVo.id,5)"
                        type="danger"
                        size="small"
                        v-show="orderVo.status==3">
                    商家拒单
                </el-button>

                <el-button
                        type="info"
                        size="small"
                        disabled=""
                        v-show="orderVo.status==4">
                    商家已接单
                </el-button>
                <el-button
                        type="info"
                        size="small"
                        disabled=""
                        v-show="orderVo.status==5">
                    商家取消订单
                </el-button>
                <el-button
                        type="info"
                        size="small"
                        v-show="orderVo.status==6">
                    用户确认收货
                </el-button>
            </el-descriptions-item>

        </el-descriptions>
        <div v-if="orderVo.orderItemVoList.length>0">
            <el-table
                    ref="multipleTable"
                    :data="orderVo.orderItemVoList"
                    tooltip-effect="dark"
                    style="">
                <!--<el-table-column
                        label="商品编号"
                        width="120">
                    <template slot-scope="scope">{{ scope.row.productId }}</template>
                </el-table-column>-->
                <el-table-column
                        prop="name"
                        label="商品名称"
                        width="240">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="单价"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="count"
                        label="数量"
                        width="120">
                </el-table-column>
            </el-table>
        </div>
    </div>
</div>
<script>
    var showOrder = new Vue({
        el: "#showOrder",
        data: {
            mOrderVoList: [],
            shopId: '',
            status: '',
            orderId: '',
            states: 3,
            value: false,
            text: "您有一个新的订单请尽快处理",
            t: 2000,
            si1: 0,
            si2: 0
        }
        ,
        //显示查到的数据
        methods: {
            merchantOrderVoList() {
                //alert("-----------查询------------")
                this.shopId = JSON.parse(localStorage.getItem("shopId"));
                $.post("/order/merchantOrderVoList", {shopId: this.shopId, status: 3}, function (data) {
                    showOrder.mOrderVoList = data;

                    if (data.length != 0) {
                        showOrder.voiceBroadcast(this.text)
                    }
                    console.log(data)

                })
            }
            ,
            /*商家选择接受或拒绝订单*/
            operation(orderId, states) {
                $.post("/order/operation", {orderId: orderId, states: states}, function (data) {
                    if (data == "ok") {
                        showOrder.merchantOrderVoList()
                    } else {
                        alert(data)
                    }
                })
            }
            ,
            /*商家开启或关闭自动接单
            * 如果为true调用方法
            * */
            automaticOrder(shopId) {
                //alert("-----------接单------------")

                $.post("/order/automaticOrder", {shopId: shopId}, function (data) {
                    showOrder.merchantOrderVoList()
                })
            }
            ,
            //
            merchantSelection(value, shopId) {
                if (value) {
                    this.si1 = setInterval(function () {
                        showOrder.automaticOrder(shopId)
                    }, 12000);
                } else {
                    clearInterval(this.si1);
                }
            }
            ,
            //语言播报
            voiceBroadcast() {
                console.log(this.text)
                this.$message(this.text);
                const audio = document.getElementById('audio')
                audio.play()
            },
            autoInitOrderVoList() {
                this.si2=setInterval(function () {
                    showOrder.merchantOrderVoList()
                },3000);
            }

        }
        ,
        created() {
            this.merchantOrderVoList();
            this.autoInitOrderVoList();
        },
        destroyed(){
            clearInterval(this.si2);
        }

    });
</script>
</body>
</html>